<script setup>
import { ref, defineProps, onMounted, watch } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
import { getUserApi } from '@/api/user'
import { getGroupInfoApi } from '@/api/group'

//接收props
const props = defineProps({
  item: {
    type: Object,
  },
})
//接受handleMessage函数
const emit = defineEmits(['handleMessage'])

//个人信息
const userInfo = useUserStore().getUser()

//是否点赞
const isLike = ref(false)

//分组选择
const groupOptions = ref('default')
//处理点赞
const handleLike = () => {
  isLike.value = !isLike.value
}
//处理发信息
const handleMessage = () => {
  emit('handleMessage', props.item)
}

//个人信息或群聊信息
const Item = ref({})

//查询个人信息或群聊信息
const queryItem = async () => {
  //如果是个人信息
  if (props.item.type === 'user') {
    const res = await getUserApi(props.item.id)
    Item.value = res.data.data
  } else {
    //如果是群聊信息
    const res = await getGroupInfoApi(props.item.id)
    Item.value = res.data.data
  }
}

onMounted(() => {
  queryItem()
})

//监听props.item变化
watch(
  () => props.item,
  async () => {
    await queryItem()
  },
  {
    deep: true,
  },
)
</script>

<template>
  <div class="info-index">
    <!--头部-->
    <div class="header">
      <div class="left">
        <div class="img"><img :src="props.item.avatar" /></div>
        <div class="info">
          <div class="name">{{ props.item.name }}</div>
          <div v-if="props.item.type == 'user'" class="account">
            <span style="color: #999">QQ</span> {{ Item.account }}
          </div>
          <div v-if="props.item.type == 'group'" class="account">
            <span style="color: #999">群号</span> {{ Item.groupNumber }}
          </div>
          <div class="label">{{ Item.signature || Item.description }}</div>
        </div>
      </div>
      <div v-if="props.item.type == 'user'" @click="handleLike" class="right">
        <div v-if="!isLike" class="icon"><img src="@/assets/like-N.png" alt="" /></div>
        <div v-if="isLike" class="icon"><img src="@/assets/like-Y.png" alt="" /></div>
        <div>999+</div>
      </div>
    </div>
    <!--中部-个人基本信息-->
    <div class="info-center1">
      <div v-if="Item.gender" class="sex">
        <span style="color: skyblue">♂</span>{{ Item.gender }}
      </div>
      <div v-if="Item.age" class="age">{{ Item.age }}岁</div>
      <div v-if="Item.star" class="constellation">{{ Item.star }}</div>
      <div v-if="Item.location" class="location">居住：{{ Item.location }}</div>
    </div>
    <!--中部-QQ等级-->
    <div class="info-center2">
      <span class="icon-star"
        ><span style="font-size: 14px; color: #999">等级：</span> 🌞🌟🌟🌟🌟</span
      >
    </div>
    <!--中部-分组选择-->
    <div class="info-center3">
      <div class="left">
        <div class="icon"><img src="@/assets/group.png" alt="" /></div>
        <div class="text">好友分组</div>
      </div>
      <div class="right">
        <el-select v-model="groupOptions" style="width: 120px">
          <el-option label="我的好友" value="default"></el-option>
          <el-option label="工作" value="work"></el-option>
          <el-option label="家人" value="family"></el-option>
        </el-select>
      </div>
    </div>
    <!--中部-个性签名-->
    <div class="info-center4">
      <div class="left">
        <div class="icon"><img src="@/assets/label.png" alt="" /></div>
        <div class="text">个性签名</div>
      </div>
      <div class="right">向阳而生</div>
    </div>
    <!--中部-QQ空间-->
    <div class="info-center5" style="cursor: pointer">
      <div class="left">
        <div class="icon"><img src="@/assets/dynamics.png" alt="" /></div>
        <div class="text">QQ空间</div>
      </div>
      <div class="right">
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
    <!--中部-动态-->
    <div class="info-center6">
      <div class="item">
        <img src="" alt="" />
      </div>
    </div>
    <!--底部-->
    <div class="info-bottom">
      <el-button v-if="userInfo.id === props.item.id">编辑资料</el-button>
      <el-button v-if="userInfo.id !== props.item.id">分享</el-button>
      <el-button v-if="userInfo.id !== props.item.id">音视频通话</el-button>
      <el-button @click="handleMessage" type="primary">发消息</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.info-index {
  width: 100%;
  .header {
    margin: 80px 60px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
    .left {
      .info {
        text-align: center;
        .name {
          font-size: 24px;
          font-weight: bold;
        }
        .account {
          font-size: 12px;
          color: #ccc;
        }
        margin-top: 20px;
        margin-left: 10px;
      }
      display: flex;
    }
    .right {
      cursor: pointer;
      img {
        width: 30px;
        height: 30px;
        margin-bottom: -5px;
      }
    }
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .info-center1 {
    margin: -60px 60px;
    display: flex;

    div {
      font-size: 14px;
      margin-left: 10px;
      border-right: 1px solid #eee;
      padding-right: 10px;
    }
    div:last-child {
      border-right: none;
    }
  }
  .info-center2 {
    margin: 70px 70px;
  }
  .info-center3,
  .info-center4,
  .info-center5,
  .info-center6 {
    display: flex;
    justify-content: space-between;
    margin: -50px 65px;
    .left {
      font-size: 14px;
      img {
        margin-right: 5px;
        width: 20px;
        height: 20px;
      }
      display: flex;
      align-items: center;
    }
  }
  .info-center4 {
    margin: 65px 65px;
  }
  .info-bottom {
    text-align: center;
    button {
      width: 150px;
    }
    margin: 100px 30px;
  }
}
</style>
